@import 'antd/es/style/themes/default.less';
@import '../../../../assets/styles/color/color.less';
.w-wave {
  position: relative;
  margin: auto;
  * {
    box-sizing: border-box;
  }
  .w-sub-ball {
    width: 100%;
    height: 100%;
    .w-sub-ball-item {
      padding: 10px 0;
      .w-sub-ball-item-wrapped {
        background: @c-gray-8;
        border-radius: 3px;
        // max-height: 75px;
        // cursor: pointer;
        transition: .3s;
        padding: 15px 10px 15px 20px;
        position: relative;
        height: 100%;
        &:before {
          content: ' ';
          display: block;
          width: 2px;
          left: 0;
          top: 0;
          bottom: 0;
          position: absolute;
        }
        &:hover {
          &:before {
            background: @primary-color;
          }
        }
        .w-sub-ball-item-text {
          line-height: 18px;
          text-align: left;
          left: -20px;
          right: -20px;
          font-size: 12px;
          z-index: 1;
          h3 {
            font-size: 12px;
            font-weight: normal;
            vertical-align: middle;
            display: flex;
            align-items: center;
            line-height: 1.2;
            color: @text-color;
            i {
              width: 16px;
              height: 16px;
              font-size: 16px;
              margin-right: 8px;
            }
          }
          .w-sub-ball-item-text-describe {
            margin-top: 18px;
            overflow: hidden;
            // color: @heading-color;
            span:first-child {
              width: 40%;
            }
            span {
              display: block;
              width: 30%;
              float: left;
              padding-right: 10px;
              i {
                margin-right: 5px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  .w-core-ball {
    border-radius: 50%;
    background: @c-gray-8;
    z-index: 1;
    transition: .3s;
    .w-core-ball-text {
      z-index: 1;
      .w-core-ball-text-wrapper {
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 300;
        &>div{
          position: relative;
          width: 100%;
        }
      }
      .w-core-ball-text-label { 
        color: @c-gray-6;
        font-size: 12px;
        text-align: center;
        position: absolute;
        top: -16px;
        font-weight: 400;
        left: 50%;
        transform: translateX(-50%);
      }
      .w-core-ball-text-num {
        display: block;
        font-size: 20px;
        font-style: normal;
        color: @heading-color;
      }
      .w-core-ball-text-unit {
        font-size: 14px;
        font-style: normal;
        color: #787A7E;
      }
    }
    .w-core-ball-wave {
      overflow: hidden;
      border-radius: 100%;
      .w-water-wave {
        margin-left: -7px;
      }
    }
  }
  .position-absolute {
    position: absolute;
    display: block;
  }
  // .w-wave-popup {
  //   z-index: 2;
  //   background: #fff;
  //   padding: 20px;
  //   min-width: 120px;
  //   border-radius: 5px;
  //   display: inline-block;
  //   border: 1px #e4e7ed solid;
  //   position: absolute;
  //   left: 0 !important;
  //   right: 0 !important;
  //   margin-top: 40px;
  //   .w-wave-title {
  //     margin-bottom: 10px;
  //   }
  //   .w-wave-custom-popup {
  //     width: 280px;
  //     max-height: 170px;
  //     overflow-y: auto;
  //     font-size: 14px;
  //     border-radius: 5px;
  //     font-size: 12px;
  //     &:after {
  //       content: '';
  //       display: block;
  //       clear: both;
  //       font-size: 0;
  //     }
  //     h3 {
  //       margin: 0 0 10px 0;
  //       font-size: 16px;
  //     }
  //     ul {
  //       display: flex;
  //       flex-wrap: wrap;
  //     }
  //     .w-wave-custom-popup-li {
  //       display: block;
  //       margin: 10px 10px 0 0;
  //       padding: 5px 15px;
  //       cursor: pointer;
  //       background: #fff;
  //       border: 1px #e4e7ed solid;
  //       border-radius: 5px;
  //       max-width: 220px;
  //       &:hover {
  //         background: #59629e;
  //         border: 1px #59629e solid;
  //         color: #fff;
  //       }
  //     }
  //   }
  //   &:before {
  //     display: block;
  //     content: '';
  //     width: 0;
  //     height: 0;
  //     left: -8px;
  //     top: 4px;
  //     position: absolute;
  //     background: none;
  //     border-width: 8px 8px 8px 0;
  //     border-style: solid;
  //     border-color: transparent #e4e7ed transparent transparent;
  //   }
  //   .w-wave-popup-pointer {
  //     width: 0;
  //     height: 0;
  //     top: 5px;
  //     position: absolute;
  //     background: none;
  //     border-style: solid;
  //   }
  //   &.w-wave-popup-left {
  //     &:before {
  //       right: -8px;
  //       left: auto;
  //       border-width: 8px 0 8px 8px;
  //       border-color: transparent transparent transparent #e4e7ed;
  //     }
  //     .w-wave-popup-pointer {
  //       right: -7px;
  //       left: auto;
  //       border-width: 7px 0 7px 7px;
  //       border-color: transparent transparent transparent #fff;
  //     }
  //   }
  //   &.w-wave-popup-right {
  //     &:before {
  //       left: -8px;
  //       right: auto;
  //       border-width: 8px 8px 8px 0;
  //       border-color: transparent #e4e7ed transparent transparent;
  //     }
  //     .w-wave-popup-pointer {
  //       left: -7px;
  //       right: auto;
  //       border-width: 7px 7px 7px 0;
  //       border-color: transparent #fff transparent transparent;
  //     }
  //   }
  //   &.w-wave-popup-bottom {
  //     &:before {
  //       top: auto;
  //       bottom: 5px;
  //     }
  //     .w-wave-popup-pointer {
  //       top: auto;
  //       bottom: 6px;
  //     }
  //   }
  // }
}